<template>
  <view>
    <view v-if="collectionPointInfoListData.length >0" class="list-bg">
      <view class="list-title">
        集货点提货
        <text class="hint">请您前往指定集货点进行提货！</text>
      </view>
      <view v-for="(item, index) in collectionPointInfoListData" :key="pickup" class="picking-con">
        <text class="text01">{{ item.stockName }}</text>
        <text class="text02">共{{ item.productQty }}件商品</text>
        <view class="line-progress">
          <u-line-progress :percentage="item.pickingProgress" :show-text="false" active-color="#FF6010" />
          <text class="number">{{ item.pickingProgress }}%</text>
        </view>
      </view>
    </view>
    <view v-if="warehouseInfoListData.length >0" class="list-bg">
      <view class="list-title">
        各库房提货
        <text class="hint">请您前往以下库房进行提货！</text>
      </view>
      <view v-for="(item, index) in warehouseInfoListData" :key="pickup" class="picking-con">
        <text class="text01">{{ item.stockName }}</text>
        <text class="text02">共{{ item.productQty }}件商品</text>
        <view class="line-progress">
          <u-line-progress :percentage="item.pickingProgress" :show-text="false" active-color="#FF6010" />
          <text class="number">{{ item.pickingProgress }}%</text>
        </view>
      </view>
    </view>
    <view v-if="isshowQRCode == 0 && pickupCodeData" class="list-bg qrcode-box">
      <view
        v-if="isshowQRCode == 0"
        class="qrcode-info"
      >订单号：{{ orderNo }}</view>
      <view class="qc">
        <QRCodeImg v-if="isshowQRCode == 0" ref="qrCodeImg" :img-width="QRWidth" :qr-code-info="orderNo" />
      </view>
      <view v-if="pickupCodeData" class="qrcode-info">提货码：<text class="number">{{ pickupCodeData }}</text></view>
    </view>
    <basePage :show-tabbar="false" :page-params="pageParams" />
  </view>
</template>

<script>
import QRCodeImg from '@/components/QR-code'
import { postPickingProgressDetail } from '@/api/orderApi'
import basePage from '@/components/base-page';
import { returnLoginFn } from '@/common/common';
export default {
  name: 'Index',
  components: {
    QRCodeImg,
    basePage
  },
  data() {
    return {
      collectionPointInfoListData: '',
      warehouseInfoListData: '',
      pickupCodeData: '',
      QRWidth: 330,
      isshowQRCode: 0,
      orderNo: '',
      pageParams: {
        state: '',
        emptyTitle: '无提货信息～',
        errorTitle: '请求失败',
        showButton: false
      }
    }
  },
  onLoad(option) {
    this.orderNo = option.orderNo
    if (this.vuex_loginStatus && this.vuex_accountInfo && this.vuex_accountInfo.loginAccount) {
      this.PickingProgressDetailFn()
    } else {
      const callbackUrl = `/orders/pickup-Infomation/pickup-Infomation`
      const urlParams = JSON.stringify({ orderNo: this.orderNo })
      returnLoginFn(callbackUrl, urlParams)
    }
  },
  methods: {
    PickingProgressDetailFn() {
      const params = { 'orderNo': this.orderNo }
      postPickingProgressDetail(params).then((res) => {
        if (res.data != null) {
          this.collectionPointInfoListData = res.data.collectionPointInfoList
          this.warehouseInfoListData = res.data.warehouseInfoList
          this.pickupCodeData = res.data.pickupCode
          this.isshowQRCode = res.data.showQRCode
        } else {
          this.pageParams.state = 'EMPTY'
        }
      }).catch(() => {

      })
    }
  }
}
</script>

<style scoped lang="scss">
.list-bg{
  padding:0 0 40rpx;
  .list-title{
    .hint{
      color: #FF8F1F;
      margin-left:70rpx;
      font-size: $uni-font-size-sm;
      font-weight: normal;
    }
  }
  .picking-con{
    padding-top:30rpx;
    height: 36rpx;
    position: relative;
    overflow: hidden;
    clear: both;
    .text01{
      float: left;
      width:170rpx;
      margin-left: 20rpx;
    }
    .text02{
      float: left;
      width: 180rpx;
    }
    .line-progress{
      margin:6rpx 0 0 0;
      width: 230rpx;
      float: left;
      .number{
        position: absolute;
        right:26rpx;
        top:30rpx;
        font-size: $uni-font-size-base;
        font-weight: bold;
      }
    }
  }
}
.qrcode-box{
  text-align: center;
  padding:24rpx 0 42rpx;
  .qrcode-info{
    padding:24rpx 0 0;
    .number{
      font-size: 48rpx;
      font-weight: bold;
    }
  }
  .qrcode-img{
    margin:30rpx auto 0;
    width: 400rpx;
  }
  .qc{
    width: 330rpx;
    height:330rpx;
    margin: 20rpx auto 0;
  }
}
</style>
